<template>
  <div>
    <highcharts :options="options" style="height: 400px" ref="highchart"></highcharts>
    <!--<div class="tip-wrap">{{$t('report.hicharsNotes')}}<span class="tips tips-show">{{$t('report.hicharsLight')}}</span><span class="tips tips-hide">{{$t('report.hicharsDark')}}</span></div>-->
  </div>
</template>
<script>
  import { colorConfigArr } from '@/utils/reportUtils'
  export default {
    name: 'monitorColumn',
    data () {
      return {
        options: {
          chart: { type: 'column', animation: false },
          colors: colorConfigArr,
          xAxis: {
            categories: [],
            title: {
              enabled: true,
              text: '',
              style: { fontWeight: 'normal' }
            },
            visible: true
          },
          plotOptions: {
            series: {
              animation: false
            },
            column: {
              events: {
                legendItemClick: function (event) {
                  return false
                }
              }
            }
          },
          yAxis: {
            gridLineColor: '#e6e6e6',
            allowDecimals: false,
            title: { text: '' },
            visible: true
          },
          title: {text: ''},
          legend: { align: 'center', verticalAlign: 'top', y: 30 },
          tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}{point.valueSuffix}</b><br/>',
            shared: true
          },
          credits: { enabled: false },
          series: []
        }
      }
    },
    props: {
      data: {
        type: Object,
        default: function () {
          return {
            xCategories: [],
            seriesArray: []
          }
        }
      },
      chartStyle: {
        type: Object,
        default: function () {}
      }
    },
    components: {
    },
    watch: {
      'data.seriesArray' () {
        this.init()
      },
      '$store.state.navMenuState' () {
        if (this.$refs.highchart) {
          this.$refs.highchart.chart.reflow()
        }
      }
    },
    computed: {
    },
    methods: {
      init (data) {
        if (!data) {
          this.options.xAxis.categories = this.data.xCategories
          this.options.series = this.data.seriesArray
        } else {
          this.options.xAxis.categories = data.categoriesArray || []
          this.options.series = data.seriesArray
        }
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../../assets/common.styl';
  .tip-wrap
    color $cf-gray4
  .tips
    display inline-block
    position relative
    padding-right 15px
    &:before
      content: ''
      display inline-block
      border-radius 50%
      width 10px
      height 10px
      margin-right 5px
      background-color $cf-gray7
  .tips.tips-show
    padding-left 15px
    &:before
      background-color $c-main
</style>
